<template>
  <ul class="nodes-bar">
    <li class="mb10">
      <n-tag :bordered="false" type="error">
        基础组件
      </n-tag>
    </li>
    <li>
      <p>开始：</p>
      <div
        class="start-node"
        data-type="start-node"
        @mousedown="startDrag"
      ></div>
    </li>
    <li>
      <p>结束：</p>
      <div class="end-node" data-type="end-node" @mousedown="startDrag"></div>
    </li>
    <li>
      <p>节点：</p>
      <div
        class="general-node"
        data-type="general-node"
        @mousedown="startDrag"
      ></div>
    </li>

    <li class="mb10">
      <n-tag :bordered="false" type="error">
        自定义组件
      </n-tag>
    </li>

    <li class="mb10">
      <p>头像：</p>
      <tabCom data-type="tab-node" @mousedown="startDrag"></tabCom>
    </li>

    <li class="mb10">
      <p>轮播图：</p>
      <boardcastCom
        data-type="board-node"
        @mousedown="startDrag"
      ></boardcastCom>
    </li>

    <li class="mb10">
      <p style="margin-bottom:20px">城市图表：</p>
      <cityCom data-type="city-node" @mousedown="startDrag"></cityCom>
    </li>
    <li style="margin-top:20px;">
      <p style="margin-bottom:20px">导出：</p>
      <NButton @click="exportData">导出</NButton>
    </li>
  </ul>
</template>
<script setup>
import { inject, ref, watch } from "vue";
import { Addon } from "@antv/x6";
const { Dnd } = Addon;

// 组件
import tabCom from "./subComponents/tab-com.vue";
import boardcastCom from "./subComponents/boardcast-com.vue";
import cityCom from "./subComponents/badge-com.vue";

import { NIcon, NTag, NButton } from "naive-ui";

const graph = inject("graph");
const dnd = ref({});
const startDrag = e => {
  const target = e.currentTarget;
  const type = target.getAttribute("data-type");
  let node;
  if (type === "general-node") {
    node = graph.value.createNode({
      shape: "general-node"
    });
  }
  if (type === "start-node") {
    node = graph.value.createNode({
      shape: "start-node"
    });
  }
  if (type === "special-node") {
    node = graph.value.createNode({
      shape: "special-node"
    });
  }

  // console.log(type);

  // if (type === "tab-node") {
  //   node = graph.value.createNode({
  //     shape: tabCom
  //   });
  // }

  node = graph.value.createNode({ shape: type });
  dnd.value.start(node, e);
};
const initDnd = () => {
  dnd.value = new Dnd({
    target: graph.value,
    validateNode() {
      return true;
    }
  });
};

const exportData = () => {
  console.log(JSON.stringify(graph.value.toJSON({ diff: true }), null, 2));
  // document.write(this.getGraph.toJSON().cells)
};
watch(graph, val => {
  console.log(val);
  initDnd();
});
</script>
<style lang="scss">
.mb10 {
  margin-bottom: 10px;
  margin-top: 30px;
}
.nodes-bar {
  min-width: 200px;
  max-width: 200px;
  margin-right: 10px;
  height: 100%;
  overflow-y: auto;
  background: #fff;
  li {
    margin-bottom: 10px;
    color: #666;
    font-size: 14px;
    .general-node {
      width: 80px;
      height: 40px;
      line-height: 36px;
      text-align: center;
      border: 1px solid #ff7c0e;
      border-radius: 4px;
      margin: 10px auto;
      background: url(../../../assets/graph/label.png) no-repeat center / 30px;
    }

    .start-node {
      width: 40px;
      height: 40px;
      line-height: 38px;
      border-radius: 50%;
      text-align: center;
      border: 1px solid #06cc76;
      margin: 10px auto;
      background: url("../../../assets/graph/start.png") no-repeat center / 20px
        20px;
    }
    .end-node {
      width: 40px;
      height: 40px;
      line-height: 38px;
      border-radius: 50%;
      text-align: center;
      border: 1px solid #4440aa;
      margin: 10px auto;
      background: url("../../../assets/graph/end.png") no-repeat center / 20px
        20px;
    }
    .special-node {
      width: 80px;
      height: 40px;
      line-height: 36px;
      text-align: center;
      margin: 10px auto;
      border: 1px solid #f33b3d;
      border-radius: 4px;
      background: url("../../../assets/graph/edit.png") no-repeat center / 20px
        20px;
    }
    .shunt-node {
      width: 40px;
      height: 40px;
      line-height: 45px;
      text-align: center;
      transform: rotateZ(45deg);
      margin: 10px auto;
      border: 1px solid #3e8bf8;
      border-radius: 4px;
      img {
        transform: rotateZ(-45deg);
        width: 20px;
        height: 20px;
      }
      // background: url('../assets/edit.png') no-repeat center / 20px 20px;
    }
  }
}
</style>
